<script setup>
	import { ref, watch } from 'vue'
	import { useRoute } from 'vue-router'
	import { getAssetURL } from '@/utils/get-assets.js'
	import tabbarData from '@/assets/data/tabber.js'

	// 解决默认索引的bug
	const route = useRoute()
	const currentIndex = ref(0)
	// 监听路由改变时对应的路由地址
	watch(route, (newRoute) => {
		// 没有找到返回-1
		const index = tabbarData.findIndex((item) => item.path === newRoute.path)
		if (index === -1) return
		currentIndex.value = index
	})
</script>

<template>
	<div class="tab-ber-vant">
		<van-tabbar
			v-model="currentIndex"
			active-color="#45cfff"
			route>
			<template
				v-for="(item, index) in tabbarData"
				:key="index">
				<van-tabbar-item :to="item.path">
					<span>{{ item.text }}</span>
					<template #icon>
						<img
							v-if="currentIndex !== index"
							:src="getAssetURL(item.image)"
							alt=""
							class="img" />
						<img
							v-else
							:src="getAssetURL(item.imageActive)"
							alt=""
							class="img" />
					</template>
				</van-tabbar-item>
			</template>
		</van-tabbar>
	</div>
</template>

<style lang="scss" scoped>
	.tab-ber-vant {
		:deep(.van-tabbar--fixed) {
			border-top: 1px solid #f2f2f2;
		}
		.img {
			height: 26px;
		}
	}
</style>
